<template>
  <a-card class="general-card" title="最新动态">
    <template #extra>
      <a-link> 查看全部 </a-link>
    </template>
    <a-list :bordered="false">
      <a-list-item
        v-for="activity in activityList"
        :key="activity.id"
        action-layout="horizontal"
      >
        <a-skeleton
          v-if="loading"
          :loading="loading"
          :animation="true"
          class="skeleton-item"
        >
          <a-row :gutter="6">
            <a-col :span="2">
              <a-skeleton-shape shape="circle" />
            </a-col>
            <a-col :span="22">
              <a-skeleton-line :widths="['40%', '100%']" :rows="2" />
            </a-col>
          </a-row>
        </a-skeleton>
        <a-list-item-meta
          v-else
          :title="activity.title"
          :description="activity.description"
        >
          <template #avatar>
            <a-avatar>
              <img :src="activity.avatar" alt="avatar" />
            </a-avatar>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </a-list>
  </a-card>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { queryLatestActivity } from '@/api/user-center';
import useLoading from '@/hooks/loading';

export default defineComponent({
  setup() {
    const { loading, setLoading } = useLoading(true);
    const activityList = ref(new Array(7).fill({}));
    const fetchData = async () => {
      try {
        const { data } = await queryLatestActivity();
        activityList.value = data;
      } catch (err) {
        // you can report use errorHandler or other
      } finally {
        setLoading(false);
      }
    };
    fetchData();
    return {
      loading,
      activityList,
    };
  },
});
</script>

<style scoped lang="less">
.latest-activity {
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.general-card :deep(.arco-list-item) {
  padding-left: 0;
  border-bottom: none;

  .arco-list-item-meta-content {
    flex: 1;
    padding-bottom: 27px;
    border-bottom: 1px solid var(--color-neutral-3);
  }

  .arco-list-item-meta-avatar {
    padding-bottom: 27px;
  }

  .skeleton-item {
    margin-top: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-neutral-3);
  }
}
</style>
